<template>
    <!--便签-->
    <div class="module note-module">
        <div class="bg"><div></div></div>
        <div class="module-content">
            <div class="expandingArea-box">
                <!-- oninput="keyUpNote(this)"-->
                <textarea v-model="noteText" :readonly='isRead' placeholder="这里是便签，请单击输入您想要录入的内容..." @click="editNote" @blur="saveNote" @input="keyUpNote"></textarea>
            </div>
            <p class="text-length"><span>{{textNum}}</span>/500</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "note",
        data(){
            return{
                isRead:true,
                noteText:"",
                textNum:0,
                preNode:''
            }
        },
        mounted(){
            this.getNote();
        },
      methods:{
          editNote(){
          this.isRead = false;
        },
          saveNote(){
                this.isRead = true;
                //校验是否更新便签内容
                if(this.preNode != this.noteText ){
                    //向后台发送数据
                        this.axios.post(CUSTOM_SERVICE_URL + "userNote/saveUserNoteOrUpdate",{
                            "content":this.noteText
                        }).then(response => {
                        }).catch(error => {
                                console.log(error);
                        });
                }
          },
          keyUpNote(){
              this.textNum = this.noteText.length;
              if(this.textNum > 500){ 	//控制长度为500字
                  this.noteText = this.noteText.substr(0 ,500);
              }
          },
          /*便签获取*/
          getNote(){
                  this.axios.post(CUSTOM_SERVICE_URL + "userNote/findUserNoteByUserCode").then(response => {
                      if (response.data.status == 'SUCCESS' && response.data.body.content) {
                          this.noteText = response.data.body.content;
                          this.textNum = this.noteText.length;
                          this.preNode = response.data.body.content;
                      }
                  }).catch(error => {
                          console.log(error);
                  });
          }
      }
    }


</script>

<style scoped>
    .note-module{
        border: 0;
        padding: 0;
        width: 100%;
        height: 214px;
        box-shadow: none;
        background-color: transparent;
        position: relative;
    }
    .note-module .bg{
        height: 214px;
        width: 100%;
        position: absolute;
        border:75px double orange;
        border-image:url(../../../static/resources/img/note.png) 75 repeat;
    }

    .note-module .bg div{
        background-color: #ffde66;
        width: 101%;
        height: 101%;
        margin-left: -1px;
    }

    .note-module .module-content{
        height: 100%;
        width: 100%;
        padding: 35px 10px 20px 14px;
        z-index: 10;
    }
    .note-module .expandingArea-box{
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .note-module .module-content textarea{
        font-size: 14px;
        font-family: "Microsoft YaHei", 微软雅黑 , Arial, sans-serif;
        color: #333;
        line-height: 1.5;
        border: 0;
        padding: 0 78px 0 0;
        box-sizing: border-box;

    }
    .note-module .module-content textarea{
        top:0;
        left:0;
        background: transparent;
        border: 0;
        width: 100%;
        height: 100%;
        width: calc(100% + 25px);
    }
    .note-module .module-content textarea[readonly]{
        cursor: text;
    }

    .note-module .text-length{
        text-align: right;
        color: #999;
        z-index: 1000;
        position: relative;
        margin-right: 20px;
    }

    .note-module .text-length span{
        color: #333;
    }

</style>
